<template>
    <div>
        <el-row>
            <el-button type="warning" @click="typeEdit">字典类型修改</el-button>
            <el-button type="warning" @click="detailEdit">字典细节修改</el-button>
            <el-button type="primary" @click="typeAdd">字典类型添加</el-button>
            <el-button type="primary" @click="detailAdd">字典细节添加</el-button>
            <el-button type="danger" round @click="typeDel">删除</el-button>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12"><div class="grid-content bg-purple">

                <el-table
                        ref="singleTable"
                        :data="typeTableData"
                        highlight-current-row
                        @current-change="handleCurrentChangeType"
                        style="width: 100%">
                    <el-table-column
                            type="index"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            property="name"
                            label="名称"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            property="sn"
                            label="字典编号"
                            width="120">
                    </el-table-column>
                </el-table>
                <el-row :gutter="20">
                    <el-col :span="6" :offset="18">
                        <div class="grid-content bg-purple">
                            <el-pagination
                                    small
                                    layout="prev, pager, next"
                                    :total="typeTotal">
                            </el-pagination>
                        </div></el-col>
                </el-row>



            </div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple">
                <el-table
                        ref="singleTable"
                        :data="detailTableData"
                        @current-change="handleCurrentChange"
                        highlight-current-row
                        style="width: 100%">
                    <el-table-column
                            type="index"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            property="name"
                            label="名称"
                            width="120">
                    </el-table-column>
                </el-table>
                <el-col :span="6" :offset="18"><div class="grid-content bg-purple">
                    <el-pagination
                            small
                            layout="prev, pager, next"
                            :total="detailTotal">
                    </el-pagination>
                </div></el-col>
            </div></el-col>
        </el-row>
        <el-dialog :title="typeTitle" :visible.sync="typeEditFormVisible" :close-on-click-modal="true">
            <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
                <el-form-item label="品牌" prop="name">
                    <el-input v-model="editForm.name" auto-complete="off">品牌</el-input>
                </el-form-item>
                <el-form-item label="编号" prop="sn">
                    <el-input v-model="editForm.sn" auto-complete="off">编号</el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="typeEditFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="typeEditSubmit" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>

        <el-dialog :title="typeTitle" :visible.sync="editFormVisible" :close-on-click-modal="true">
            <el-form :model="detailEditForm" label-width="80px" :rules="editFormRules" ref="editForm">
                <el-form-item label="类型" prop="dictionariesType">
                    <el-select v-model="detailEditForm.dictionariesType" placeholder="请选择"> <!--绑定,部门领导(员工)这个对象 -->
                        <!--
                            v-for: 遍历查询的
                            :key : 领导的唯一表示, ema
                            :label :展示的数据---这里是名字
                            :value :向后台传递的数据
                        -->
                        <el-option
                                v-for="item in types"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            <span style="float: left">{{ item.name }}</span> <!-- 左边展示数据 -->
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.sn }}</span> <!-- 右边展示的数据 -->
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="明细名" prop="name">
                    <el-input v-model="detailEditForm.name" auto-complete="off">明细名</el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
    export default {
        data() {
            return {
                types:[],
                detailEditForm: {
                    name:'',
                    dictionariesType:"",
                    id:0

                },
                editFormVisible: false,
                typeTitle:'',
                editLoading: false,
                editFormRules: { // 必填项
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ]
                },
                editForm: {},
                detail: {
                    id: 0,
                },

                typeEditFormVisible: false,
                detailTableData:[],
                typeTableData: [],
                currentRow: {
                    id: 0,
                },
                typeCurrentPage: 1,
                typePageSize:5,
                typeTotal:0,
                detailTotal:0,
                detailCurrentPage:1,
                detailPageSize:5,


            }
        },

        methods: {
            getTypeData(){
                console.log("获取type")
                let para = {
                    currentPage: this.typeCurrentPage,
                    pageSize: this.typePageSize,
                };
                this.$http.post("/dictionaryType", para)
                    .then(result => {
                        console.log(result);
                        this.typeTableData = result.data.data;
                        this.typeTotal =  result.data.totals;
                        console.log(this.typeTableData)
                    })
                    .catch(result => {
                        this.$message({
                            message: "系统忙",
                            type: 'error'
                        });
                    })
            },

            handleCurrentChangeType(val) { // 表一点击, 获取当前行对象
                console.log("调用获取细节")
                console.log(val)
                this.currentRow = val;
                if (this.currentRow == null){
                    this.getTypeData();
                } else {
                    this.handleCurrentChangeDetail(this.currentRow.id)
                }

            },
            handleCurrentChange(val){
                console.log("细节选择")
                console.log(val);
                this.detail = val;
                if (this.detail == null || this.detail.id == 0){
                    this.getTypeData();
                }
            },
            handleCurrentChangeDetail (id) { //
                console.log("获取细节")
                let para = {
                    type : {"id": id},
                    currentPage: this.detailCurrentPage,
                    pageSize: this.detailPageSize,
                }
                this.$http.post("/dictionaryDetail", para)
                    .then(result => {
                        console.log(result);
                        this.detailTableData = result.data.data;
                        this.detailTotal = result.data.totals;
                    })
                    .catch(result => {
                        this.$message({
                            message: "系统忙",
                            type: 'error'
                        });
                    })
            },
            typeDel() {
                console.log("删除")
                console.log(this.currentRow)
                if (this.currentRow.id == 0){
                    console.log("未选择删除数据")
                    this.$message({
                        message: "请点击选择数据",
                        type: 'error'
                    });
                }else {
                    if (this.detail.id == 0){
                        let id = this.currentRow.id;
                        console.log(id);
                        this.$confirm('确认删除选中记录吗？', '提示', {
                            type: 'warning'
                        }).then(result => {
                            this.$http.delete("/dictionaryType/" + id)
                                .then(result => {
                                    if (result.data.success){
                                        this.$message({
                                            message: result.data.message,
                                            type: 'success'
                                        });
                                    }else {
                                        this.$message({
                                            message: result.data.message,
                                            type: 'error'
                                        });
                                    }
                                })
                                .catch(result => {
                                })
                            this.detailTableData = []
                            this.getTypeData();
                        });
                    } else {
                        let id = this.detail.id;
                        console.log(id)
                        this.$confirm('确认删除选中记录吗？', '提示', {
                            type: 'warning'
                        }).then(result => {
                            this.$http.delete("/dictionaryDetail/" + id)
                                .then(result => {
                                    if (result.data.success){
                                        this.$message({
                                            message: result.data.message,
                                            type: 'success'
                                        });
                                    }else {
                                        this.$message({
                                            message: result.data.message,
                                            type: 'error'
                                        });
                                    }
                                })
                                .catch(result => {
                                })
                            this.detailTableData = []
                            this.getTypeData();
                        })
                            .catch(result => {})
                    }

                }

            },
            typeAdd(){ // 添加类型模态框

                this.typeTitle = "字典类型添加";
                this.typeEditFormVisible = true;
                this.editForm = {
                    name: '',
                    sn: ''
                }
            },
            typeEdit(){ // 展示类型修改模态框
                if (this.currentRow.id == 0){
                    console.log("未选择删除数据")
                    this.$message({
                        message: "请点击选择数据",
                        type: 'error'
                    });
                } else {
                    this.typeTitle = "字典类型修改";
                    this.typeEditFormVisible = true;
                    this.editForm = {
                        id: this.currentRow.id,
                        name: this.currentRow.name,
                        sn: this.currentRow.sn
                    }
                }
            },
            typesArr(){
                this.$http.get("/dictionaryType")
                    .then(result => {
                        console.log("获取类型数组")
                        console.log(result);
                        this.types = result.data;
                        console.log(this.types)
                    })
                    .catch()
            },
            detailAdd(){ // 展示细节添加模态框
                this.typeTitle = "字典细节添加";
                this.editFormVisible = true;
                this.editForm = {
                    name: ''
                }
                this.typesArr();
            },
            detailEdit(index, row){ // 展示细节修改模态框
                if (this.detail.id == 0 || this.detail.id ==null){
                    console.log("未选择删除数据")
                    this.$message({
                        message: "请点击选择数据",
                        type: 'error'
                    });
                } else {
                    this.typesArr();
                    this.typeTitle = "字典细节修改";
                    this.editFormVisible = true;
                    this.detailEditForm = {
                        id: this.detail.id,
                        name: this.detail.name,
                        dictionariesType: this.detail.dictionariesType

                    }
                    console.log(this.detailEditForm);
                    this.detail = {
                        id: 0
                    }
                }
            },
            editSubmit(){
                if (!this.detailEditForm.dictionariesType.id){
                    console.log(this.detailEditForm.dictionariesType)
                    this.detailEditForm.dictionariesType = {"id": this.detailEditForm.dictionariesType}
                }
                this.$http.put("/dictionaryDetail", this.detailEditForm)
                    .then(result => {
                        if (result.data.success){
                            this.$message({
                                message: result.data.message,
                                type: 'success'
                            });
                        }else {
                            this.$message({
                                message: result.data.message,
                                type: 'error'
                            });
                        }
                        this.editFormVisible = false;
                        this.detailTableData = [];
                        this.getTypeData();
                    })
                    .catch()

            },
            typeEditSubmit(){ // 提交
                this.$http.put("/dictionaryType", this.editForm)
                    .then(result => {
                        if (result.data.success){
                            this.$message({
                                message: result.data.message,
                                type: 'success'
                            });
                        }else {
                            this.$message({
                                message: result.data.message,
                                type: 'error'
                            });
                        }
                        this.typeEditFormVisible = false;
                        this.detailTableData = [];
                        this.getTypeData();
                    })
                    .catch()
            }
        },

        mounted() {
            this.getTypeData();
        }
    }
</script>

<style>
    .el-row {
        margin-bottom: 20px;
    &:last-child {
         margin-bottom: 0;
     }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>